header{
	padding: .875rem .5rem;
	background: @red;
	position: relative;
	top: 0;
	width: 100%;
}

#logo{
	width: auto;
	height: 1.25rem;
}

#innerHeader{
	.flex-display;
	.justify-content(space-between);
	.align-items(center);
	width: 100%;
	max-width: @contentWidth;
	margin: 0 auto;
}

nav{
	width: 1.75rem;
	height: 1.25rem;

	&:hover .nav{
		will-change: opacity;
	}
}

#navIcon{
	width: 1.75rem;
	height: 1.25rem;
	.flex-display;
	.flex-flow(row wrap);
	.align-content(space-between);
	cursor: pointer;

	& > div{
		content: "";
		width: 100%;
		height: .125rem;
		background: @white;
	}
}

.nav{
	width: 100%;
	position: absolute;
	left: 0;
	top: 3rem;
	.flex-display;
	.flex-flow(column nowrap);
	height: 0;
	overflow-y: hidden;
	transition: .25s opacity ease-out;
	opacity: 0;
}

.show{
	height: auto;
	opacity: 1;
	z-index: 2;
}

.navItem{
	padding: .5rem;
	background: @green;
	color: @white;
	text-decoration: none;
	font-size: 1rem;
	text-transform: uppercase;
	font-weight: 700;
}

.destinations{
	padding: 1rem 0 1rem .5rem;
	margin: 0 auto;
	border-bottom: .0625rem solid @grey;
	overflow-x: auto;
	font-size: 0;
	white-space: nowrap;
	max-width: @contentWidth;
	width: 100%;
}

.destination{
	padding: 0 1rem 0 0;
	font-size: .75rem;
	display: inline-block;

	a{
		text-decoration: none;
	}
}

#content{
	max-width: @contentWidth;
	width: 100%;
	margin: 0 auto 1rem;
}

#collectionHero{
	position: relative;
	margin: 0 auto 1rem;
}

#heroImage{
	display: block;
	width: 100%;
	height: auto;
}

.heroLabel{
	background: @red;
	color: @white;
	font-size: 1rem;
	display: block;
	padding: .5rem;
	text-align: center;
	text-decoration: none;
}

.recipeImage{
	width: 100%;
	height: auto;
}

.recipe{
	border: .0625rem solid @grey;
	margin: 0 0 1rem;
}

.recipeLink{
	text-decoration: none;
}

.recipeName{
	padding: .5rem;
}

.collection{
	padding: 0 .5rem;
	margin: 0 0 1rem;
}

.collectionTitle{
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 .5rem;
	padding: 0 .5rem;
	color: @darkBlue;
}

footer{
	padding: .5rem;
	width: 100%;
	background-color: @red;
}

.footerText{
	font-size: .75rem;
	color: @white;
	text-align: center;
}

.no-js .lazy{
	display: none;
}